<!--
 * @Autor: 张小鹏
 * @Date: 2020-04-02 11:19:44
 * @LastEditors: 张小鹏
 * @LastEditTime: 2020-04-17 14:56:33
 * @description:  fto-el-column
 -->
<template>
    <div class="el-table"
    :class="[{
      'el-table--fit': fit,
      'el-table--striped': stripe,
      'el-table--border': border || isGroup,
      'el-table--hidden': isHidden,
      'el-table--group': isGroup,
      'el-table--fluid-height': maxHeight,
      'el-table--scrollable-x': layout.scrollX,
      'el-table--scrollable-y': layout.scrollY,
      'el-table--enable-row-hover': !store.states.isComplex,
      'el-table--enable-row-transition': (store.states.data || []).length !== 0 && (store.states.data || []).length < 100
    }, tableSize ? `el-table--${ tableSize }` : '']"
    >
    <div class="hidden-columns" ref="hiddenColumns"><slot></slot></div> 
    <div
      class="el-table__header-wrapper"
      ref="headerWrapper">
      <table-header
        ref="tableHeader"
        :store="store"
        :border="border"
        :default-sort="defaultSort"
        :style="{
          width: layout.bodyWidth ? layout.bodyWidth + 'px' : ''
        }">
      </table-header>
    </div>
    <div class="fto-table-container" ref="ftotablecontainer" :style="tableviewobj">
      <div class="fto-table-viewbox" ref="fto-table-viewbox" :style="tableviewbox">
        <div class="ftotablepart" :style="ftotablepart">

          <div >
            <div
              class="el-table__body-wrapper"
              ref="bodyWrapper"
              :class="[layout.scrollX ? `is-scrolling-${scrollPosition}` : 'is-scrolling-none']"
              :style="[bodyHeight]"
            >
              <table-body
                :context="context"
                :store="store"
                :stripe="stripe"
                :row-class-name="rowClassName"
                :row-style="rowStyle"
                :highlight="highlightCurrentRow"
                :style="{
           width: bodyWidth
        }"
              ></table-body>
              <div
                v-if="!data || data.length === 0"
                class="el-table__empty-block"
                ref="emptyBlock"
                :style="emptyBlockStyle"
              >
                <span class="el-table__empty-text">
                  <slot name="empty">{{ emptyText || t('el.table.emptyText') }}</slot>
                </span>
              </div>
              <div v-if="$slots.append" class="el-table__append-wrapper" ref="appendWrapper">
                <slot name="append"></slot>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script >
import { cloneDeep } from "lodash/lang";
import FtoElColumn from "./el-column";
import { EltableProps } from "./common/config";
import eltablemixins from "./common/eltablemixins";
//import minxins from "./common/minxins";
//import TableBody from "@/components/elementui/packages/table/src/table-body";
//console.log("TableBody",TableBody) tablecolumn
export default {
  name: "ftotable",
  mixins: [eltablemixins],
  computed: {
    tableviewobj() {
      return {
        "max-height": 336 + "px"
      };
    },
    tableviewbox() {
      let bodyHeight = this.computeBodyHeight();
      return {
        height: bodyHeight + "px"
      };
    }
  },
  props: {
    vcolumns:{
        type: Array,
        default: () => []
    },
    rowHeight: {
      type: Number,
      default: () => 48
    },
    maxheight: {
      type: Number,
      default: () => 300
    }
  },
  data() {
    return {
      tableAttrs: {},
      dataSource: [],
      newDataSource: [],
      innerTop: 0,
      start: 0,
      end: 0,
      lastScrollTop: 0,
      visibleCount: 0,
      ftotablepart: {}
    };
  },
  methods: {
    onScroll() {
      this.setData();
    },
    setinnerTop() {
      let innerTop = this.computeInnerTop();
      console.log("innerTop",innerTop);
      innerTop =innerTop >0 && innerTop < 48 ? 48 : innerTop;
      this.innerTop = innerTop;
      this.ftotablepart = {
        transform: `translateY(${innerTop}px)`
      };
    },
    setData(flag) {
      // 避免横向滚动带来的性能问题
      const scrollTop = this.$refs.ftotablecontainer.scrollTop;
      if (scrollTop === this.lastScrollTop && flag !== true) {
        return;
      }
      const scrollToRow = this.computeScrollToRow(scrollTop);
      let newDataSource = [];
      const { start, end } = this.getVisibleRange(scrollToRow);
      this.setinnerTop();
      this.dataSource.forEach((current, index, record) => {
        if (index >= start && index < end) {
          current.__rowIndex = index;
          newDataSource.push(current);
        }
      });
      this.newDataSource = newDataSource;
      this.store.commit("setData", this.newDataSource);
      this.lastScrollTop = scrollTop;
    },
    computeScrollToRow(offset) {
      const start = parseInt(offset / this.rowHeight);
      this.start = start;
      return start;
    },
    computeInnerTop() {
      if (typeof this.rowHeight === "function") {
        return 0;
      }
      return this.start * this.rowHeight;
    },
    computeBodyHeight() {
      if (typeof this.rowHeight === "function") {
        return 0;
      }
      return this.dataSource.length * this.rowHeight;
    },
    getVisibleRange(ExpectStart) {
      const { maxheight, rowHeight } = this;
      const len = this.dataSource.length;
      let end,
        visibleCount = 0;
      let start = 0;
      if (typeof rowHeight === "function") {
        // try get cell height;
        end = 1;
      } else {
        visibleCount = parseInt(maxheight / rowHeight, 10);

        if ("number" === typeof ExpectStart) {
          start = ExpectStart < len ? ExpectStart : 0;
        }

        end = Math.min(+start + 1 + visibleCount + 10, len);
      }
      this.end = end;
      this.visibleCount = visibleCount;
      return {
        start,
        end
      };
    },
    appendData(data) {
      this.dataSource = cloneDeep(data);
      this.setData(true);
    }
  },
  mounted() {
    this.$refs.ftotablecontainer.addEventListener("scroll", this.onScroll);
  }
};
</script>

<style lang="scss" scoped>
.fto-table-container {
  overflow-x: auto;
  overflow-y: visible;
  .fto-table-viewbox {
    overflow: hidden;
    position: relative;
    .ftotablepart {
      height: 100%;
      position: relative;
    }
  }
}
</style>